import { Card, Tabs, Button, Modal, Layout } from 'myselfantd';
import React, { useState, useRef } from 'react';
import Electron from './Electron';
import Threshold from './Threshold';
import styles from './index.module.scss';
const App: React.FC = () => {
  const ref1 = useRef<any>();
  const ref2 = useRef<any>();
  const [reload, setReload] = useState(0);
  const [key, setKey] = useState('0');

  return (
    <>
      <Layout.TabsTemplate
        targetKey={key}
        keyChnage={(key: any) => setKey(key)}
        tabBarExtraContent={
          <Button.Image
            size="large"
            style={{ position: 'absolute', right: '10px', top: '10px' }}
            type="primary"
            onClick={() =>
              key.includes('0') ? ref1.current.handleAdd() : ref2.current.handleAdd()
            }
            icon={'add'}
          >
            新 增
          </Button.Image>
        }
      >
        <Electron title="围栏设置" reload={reload} pageRef={ref1} />
        <Threshold title="阈值设置" reload={reload} pageRef={ref2} />
      </Layout.TabsTemplate>
    </>
  );
};

export default App;
